<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<header>
	<nav class="navbar navbar-default navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/">TJDBlog</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="">消息 <span class="badge">1</span></a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">${user.name } <span class="caret"></span></a>
						<ul class="dropdown-menu dropdown-menu-left">
							<li><a title="查看或修改个人信息" data-toggle="modal" data-target="#seeUserInfo">个人信息</a></li>
							<li role="separator" class="divider"></li>
							<li><a onClick="logout()">安全退出</a></li>
						</ul></li>

					<li><a data-toggle="modal" data-target="#WeChat">帮助</a></li>
				</ul>
			</div>
		</div>
	</nav>
</header>
<!--个人信息模态框-->
<div class="modal fade" id="seeUserInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<form id="managerInfoForm" method="post">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">个人信息</h4>
				</div>
				<div class="modal-body">
					<label id="verify-error1" style="color: red;padding-left: 10px;display: none">两次密码不相同</label> <label id="verify-error2" style="color: red;padding-left: 10px;display: none">所有表单项必填</label> <label
						id="verify-error3" style="color: red;padding-left: 10px;display: none">原密码错误</label>
					<table class="table" style="margin-bottom:0px;">
						<thead>
							<tr>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td wdith="20%">姓名:</td>
								<td width="80%"><input type="text" id="name" onkeypress="clearInfo()" value="${user.name }" class="form-control" name="name" maxlength="18" autocomplete="off" /></td>
							</tr>
							<tr>
								<td wdith="20%">用户名:</td>
								<td width="80%"><label class="form-control" maxlength="10" autocomplete="off" />${user.username }</label> <input type="hidden" name="username" value="${user.username }">
							</tr>
							<tr>
								<td wdith="20%">旧密码:</td>
								<td width="80%"><input id="oldpassword" onkeypress="clearInfo()" type="password" class="form-control" name="password" maxlength="18" autocomplete="off" /></td>
							</tr>
							<tr>
								<td wdith="20%">新密码:</td>
								<td width="80%"><input id="password" onkeypress="clearInfo()" type="password" class="form-control" name="newpassword" maxlength="18" autocomplete="off" /></td>
							</tr>
							<tr>
								<td wdith="20%">确认密码:</td>
								<td width="80%"><input id="password2" onkeypress="clearInfo()" type="password" class="form-control" maxlength="18" autocomplete="off" /></td>
							</tr>
						</tbody>
						<tfoot>
							<tr></tr>
						</tfoot>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
				</div>
			</div>
		</form>
	</div>
</div>


<!--微信二维码模态框-->
<div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
	<div class="modal-dialog" role="document" style="margin-top:120px;max-width:280px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫</h4>
			</div>
			<div class="modal-body" style="text-align:center">
				<img src="/images/weixin.png" style="cursor:pointer;width: 100%" />
			</div>
		</div>
	</div>
</div>
<!--提示模态框-->
<div class="modal fade user-select" id="areDeveloping" tabindex="-1" role="dialog" aria-labelledby="areDevelopingModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="areDevelopingModalLabel" style="cursor:default;">该功能正在日以继夜的开发中…</h4>
			</div>
			<div class="modal-body">
				<img src="images/baoman/baoman_01.gif" alt="深思熟虑" />
				<p style="padding:15px 15px 15px 100px; position:absolute; top:15px; cursor:default;">很抱歉，程序猿正在日以继夜的开发此功能，本程序将会在以后的版本中持续完善！</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">朕已阅</button>
			</div>
		</div>
	</div>
</div>
<script>
	//清除提示消息
	function clearInfo() {
		$("#verify-error1").css("display", "none");
		$("#verify-error2").css("display", "none");
		$("#verify-error3").css("display", "none");
	}
	function submitForm() {
		var data = $("#managerInfoForm").serialize();
		if ($("#password").val() == "" || $("#password2").val() == "" || $("#oldpassword").val() == "" || $("#name").val() == "") {
			$("#verify-error2").css("display", "block");
			return;
		}
		if ($("#password").val() != $("#password2").val()) {
			$("#verify-error1").css("display", "block");
			return;
		}
		$.post(
			"${pageContext.request.contextPath}/repassword.action",
			data,
			function(data) {
				if (data.status == "ok") {
					window.location.reload();
				} else {
					$("#verify-error3").css("display", "block");
				}
			},
			"json"
		);
	}

	function logout() {
		if (!confirm('是否确认退出？')){
			return;
		}
		$.post(
			"${pageContext.request.contextPath}/logout.action",
			function(data) {
				window.location.reload();
			}
		);
	}
</script>
